<template>
	<view class="container">
		<view class="scroll-view">
			<view class="message-list">
				<view class="message-item" v-for="(item, index) in messageList" :key="index"
					:class="{ 'unread': item.status === 0 }">
					<view class="message-left">
						<view class="message-title">
							<text class="title">{{ item.title }}</text>
							<text class="time">{{ formatDate(item.createtime) }}</text>
						</view>
						<view class="message-preview">
							<text class="preview-text">{{ item.infodesc }}</text>
							<text class="sender">来自：{{ item.admin.username }}</text>
						</view>
					</view>
					<view class="message-right">
						<view class="message-actions">
							<button class="action-btn read-btn" @click="markAsRead(item.id)" v-if="item.status === 0">
								标记已读
							</button>
							<button class="action-btn delete-btn" @click="deleteMessage(item.id, item.title)">
								删除
							</button>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus" style="margin: 20rpx 0" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			messageList: [],
			loadStatus: 'loadmore',
			page: 1,
			pageSize: 10,
			scrollHeight: 0,
			user: null,
		}
	},
	async onLoad() {
		this.user = await uni.getStorageSync('user')
		this.loadData()
		this.calculateScrollHeight()
	},
	onReady() {
		this.calculateScrollHeight()
	},
	methods: {
		calculateScrollHeight() {
			const systemInfo = uni.getSystemInfoSync()
			this.scrollHeight = systemInfo.windowHeight
		},
		formatDate(dateStr) {
			if (!dateStr) return ''
			const date = new Date(dateStr)
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
		},
		loadData() {
			if (this.loadStatus === 'nomore') return
			this.loadStatus = 'loading'
			uni.request({
				url: '/api/bf/user/message',
				method: 'POST',
				data: {
					pageNum: this.page,
					pageSize: this.pageSize,
					user: this.user
				},
				success: (res) => {
					const { infoList, infoPageInfo } = res.data
					if (this.page === 1) {
						this.messageList = infoList
					} else {
						this.messageList = [...this.messageList, ...infoList]
					}
					this.loadStatus = this.messageList.length < infoPageInfo.total ? 'loadmore' : 'nomore'
				},
				fail: (err) => {
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
					this.loadStatus = 'loadmore'
				}
			})
		},
		loadMore() {
			if (this.loadStatus === 'loading' || this.loadStatus === 'nomore') return
			this.loadStatus = 'loading'
			this.page++
			this.loadData()
		},
		markAsRead(id) {
			uni.request({
				url: `/api/user/updateInfo/${id}`,
				method: 'PUT',
				success: (res) => {
					if (res.data.code === 100) {
						uni.showToast({
							title: '标记已读成功',
							icon: 'success'
						})
						this.page = 1
						this.loadData()
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
					}
				}
			})
		},
		deleteMessage(id, title) {
			uni.showModal({
				title: '提示',
				content: `确定删除消息"${title}"吗？`,
				success: (res) => {
					if (res.confirm) {
						uni.request({
							url: `/api/user/deleteInfo/${id}`,
							method: 'DELETE',
							success: (res) => {
								if (res.data.code === 100) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									})
									this.page = 1
									this.loadData()
								} else {
									uni.showToast({
										title: '删除失败',
										icon: 'none'
									})
								}
							}
						})
					}
				}
			})
		}
	},
	onReachBottom() {
		this.loadMore()
	}
}
</script>

<style scoped lang="scss">
.container {
	padding: 0;
	height: 100vh;
	box-sizing: border-box;
	background-color: #f5f7fa;
}

.scroll-view {
	width: 100%;
	padding-bottom: 20rpx;
}

.message-list {
	.message-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 24rpx 30rpx;
		margin-bottom: 2rpx;
		transition: all 0.3s ease;
		position: relative;
		margin-bottom: 20rpx;

		&.unread {
			background-color: #f0f7ff;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 6rpx;
				background-color: #1890ff;
			}
		}

		.message-left {
			flex: 1;
			margin-right: 20rpx;

			.message-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;

				.title {
					font-size: 32rpx;
					font-weight: 500;
					color: #1a1a1a;
					max-width: 400rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.time {
					font-size: 24rpx;
					color: #999;
				}
			}

			.message-preview {
				.preview-text {
					font-size: 28rpx;
					color: #666;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					line-height: 1.4;
					margin-bottom: 8rpx;
				}

				.sender {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.message-right {
			.message-actions {
				display: flex;
				flex-direction: column;
				gap: 12rpx;

				.action-btn {
					font-size: 26rpx;
					padding: 0;
					border-radius: 24rpx;
					border: none;
					white-space: nowrap;
					width: 140rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					transition: all 0.3s ease;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;

					&.read-btn {
						background-color: #1890ff;
						color: #fff;

						&:active {
							background-color: #096dd9;
						}
					}

					&.delete-btn {
						background-color: #ff4d4f;
						color: #fff;

						&:active {
							background-color: #cf1322;
						}
					}
				}
			}
		}
	}
}
</style>
